<template>
  <div class="project-right" style="padding-left:48px;margin:0 auto;margin-top:40px;">
    <el-carousel ref="carousel" :interval="4000" height="480px" @change="onCarouselChange">
      <el-carousel-item v-for="(item,index) in uploadList" :key="index">
        <img :src="item.imgUrl" alt>
      </el-carousel-item>
    </el-carousel>
    <div class="upload-warp">
      <div class="upload-warp-left" @click="handlePrev">
        <i class="el-icon-arrow-left" />
      </div>
      <div class="upload-warp-center">
        <div v-for="(item, index) in uploadList" :key="'thumb-' + index" class="upload-warp-center-img">
          <img :src="item.imgUrl" alt :class="imgActiveIndex == index ? 'img-br' : ''" @click="handleImgClick(index)">
        </div>
      </div>
      <div class="upload-warp-left" @click="handleNext">
        <i class="el-icon-arrow-right" />
      </div>
    </div>
    <div class="upload-line">{{ uploadList[imgActiveIndex].title }}</div>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  data() {
    return {
      imgActiveIndex: 0,
      uploadList: [
        {
          imgUrl: 'https://img.intelirri.com/project_0.jpg',
          title: '项目围绕乡村振兴战略'
        },
        { imgUrl: 'https://img.intelirri.com/project_1.jpg',
          title: '提高项目区农产品科技含量与档次'
        },
        { imgUrl: 'https://img.intelirri.com/project_2.jpg',
          title: '为农业农村现代化建设和乡村振兴提供有力支撑'
        }
      ]
    }
  },
  methods: {
    onCarouselChange(index) {
      this.imgActiveIndex = index
    },
    handleImgClick(index) {
      this.imgActiveIndex = index
      this.$refs.carousel.setActiveItem(index)
    },
    // 底部图片导航列表上一张
    handlePrev() {
      if (!this.uploadList.length) return
      if (this.imgActiveIndex === 0) {
        this.imgActiveIndex = this.uploadList.length
      }
      this.imgActiveIndex--
      this.$refs.carousel.setActiveItem(this.imgActiveIndex)
    },

    // 底部图片导航列表下一张
    handleNext() {
      if (!this.uploadList.length) return
      if (this.imgActiveIndex >= this.uploadList.length - 1) {
        this.imgActiveIndex = 0
      } else {
        this.imgActiveIndex++
      }
      this.$refs.carousel.setActiveItem(this.imgActiveIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.project-right{
  padding-left:32px;
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .upload-line{
    margin-top:32px;
    width:100%;
    height:80px;
    background:url('https://api.zesi.com.cn/storage/datav/line_bg.png') no-repeat center top;
    text-align:center;
    line-height:120px;
  }
  .upload-warp {
    display: flex;
    height: 60px;
    margin-top: 80px;
    &-left {
      flex-basis: 36px;
      line-height: 60px;
      text-align: center;
      font-size: 28px;
      color: #cccccc;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover {
        color: gray;
        transition: all 0.3s ease;
      }
    }
    &-center {
      flex-basis: calc(100% - 72px);
      display: flex;
      align-items:center;
      justify-content:center;
      &-img {
        width: 32%;
        position: relative;
        border-radius: 2px;
        text-align:center;
        img {
          width: 80%;
          height: 120px;
          box-sizing: border-box;
          border-radius: 2px;
          border: 1px solid transparent;
          margin:0 auto;
        }
        .img-br {
          border: 2px solid #00f6ff;
        }
        i {
          position: absolute;
          right: -5px;
          top: -10px;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background: #09f;
          color: white;
          border-radius: 100%;
          cursor: pointer;
          transition: all 0.3s ease;
          opacity: 0;
        }
        &:hover i {
          opacity: 1;
          transition: all 0.3s ease;
        }
      }
    }
  }
</style>
